<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            padding: 20px;
        }
    </style>
</head>

<body>
    <!-- 
    1.完成今天css知识体系思维导图
    2.掌握css4中导入方式
    3.完成课件所有选择器案例
    -->
    <!-- 4.完成一下案例  -->
    <div class="box">
        <span class="text">文字变成红色 color:red</span>
    </div>
    <span class="text">文字变成蓝色 color:blue</span>
    <!-- 5.完成一下案例  -->
    <div class="article">
        <div>
            <p class="p1"> 文字颜色 color:white 背景颜色 background-color:gray</p>
        </div>
        <p class="p1">文字颜色 color:blue 背景颜色 background-color:yellow</p>
    </div>
    <div class="p1">文字颜色 color:pink 背景颜色 background-color:yellowgreen</div>
    <!-- 6.完成一下案例  -->
    <div class="container">
        <div class="b1">鼠标悬停变色</div>
        <div class="b2">鼠标悬点变色</div>
        <div class="b3">鼠标悬停父容器我变色</div>
    </div>
</body>

</html>